<template>
  <div class="route-planning bg-background text-foreground p-6">
    <h2 class="text-2xl font-bold mb-6">路径规划</h2>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
      <!-- Map Section -->
      <div class="lg:col-span-2 bg-card text-card-foreground shadow-md rounded-lg p-4">
        <div class="relative h-[600px] bg-muted rounded-lg overflow-hidden">
          <!-- Placeholder for map -->
          <div class="absolute inset-0 flex items-center justify-center text-muted-foreground">
            Map Placeholder
          </div>
          <!-- Vehicle icons -->
          <div v-for="(vehicle, index) in vehicles" :key="index" class="absolute" :style="{ left: `${vehicle.x}%`, top: `${vehicle.y}%` }">
            <TruckIcon class="w-6 h-6 text-destructive" />
          </div>
        </div>
        <!-- Electronic Fence Info -->
        <div class="mt-4 p-4 bg-primary/10 rounded-lg">
          <h3 class="text-lg font-semibold mb-2">电子围栏</h3>
          <div class="flex justify-between">
            <p><span class="font-medium">长度：</span>2689 m</p>
            <p><span class="font-medium">监测面积：</span>36.268 m²</p>
          </div>
        </div>
        <!-- Legend -->
        <div class="mt-4">
          <h3 class="text-lg font-semibold mb-2">图例</h3>
          <div class="flex space-x-4">
            <div class="flex items-center">
              <div class="w-4 h-4 bg-yellow-400 mr-2"></div>
              <span>危化品专用车道</span>
            </div>
            <div class="flex items-center">
              <div class="w-4 h-4 bg-muted mr-2"></div>
              <span>普通车道</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Right Panel -->
      <div class="space-y-4">
        <!-- Vehicle Statistics -->
        <div class="bg-card text-card-foreground shadow-md rounded-lg p-4">
          <h2 class="text-xl font-bold mb-4">车辆运行数据统计</h2>
          <div class="space-y-2">
            <p><span class="font-medium">车牌号：</span>陕A000001</p>
            <p><span class="font-medium">车辆类型：</span>危险品运输车</p>
            <p><span class="font-medium">载货类型：</span>易燃液体</p>
            <p><span class="font-medium">进入时间：</span>12:00</p>
            <p><span class="font-medium">离开时间：</span>12:00</p>
            <p><span class="font-medium">最高速度：</span>80km/h</p>
            <p><span class="font-medium">平均速度：</span>80km/h</p>
            <p><span class="font-medium">载货货物：</span>氯化钠</p>
            <p><span class="font-medium">货物数量：</span>100 KG</p>
            <p><span class="font-medium">行驶路线：</span>路线A</p>
            <p><span class="font-medium">违法记录：</span>无</p>
            <p><span class="font-medium">通行时段：</span>20: 00-10: 00</p>
          </div>
        </div>

        <!-- Video Monitoring -->
        <div class="bg-card text-card-foreground shadow-md rounded-lg p-4">
          <h2 class="text-xl font-bold mb-4">视频监控</h2>
          <div class="grid grid-cols-2 gap-2">
            <div class="bg-muted h-32 rounded flex items-center justify-center">
              <CameraIcon class="w-8 h-8 text-muted-foreground" />
            </div>
            <div class="bg-muted h-32 rounded flex items-center justify-center">
              <CameraIcon class="w-8 h-8 text-muted-foreground" />
            </div>
          </div>
          <div class="mt-2 text-center text-sm text-muted-foreground">
            <span class="mr-4">路口A</span>
            <span>路口B</span>
          </div>
        </div>

        <!-- Alert Panel -->
        <div class="bg-card text-card-foreground shadow-md rounded-lg p-4">
          <h2 class="text-xl font-bold mb-4">报警提示</h2>
          <ul class="space-y-2">
            <li v-for="(alert, index) in alerts" :key="index" class="flex justify-between">
              <span>{{ alert.message }}</span>
              <span class="text-muted-foreground">{{ alert.time }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TruckIcon, CameraIcon } from 'lucide-vue-next'

const vehicles = ref([
  { x: 20, y: 30 },
  { x: 40, y: 50 },
  { x: 60, y: 70 },
  { x: 80, y: 40 },
  { x: 30, y: 60 }
])

const alerts = ref([
  { message: 'RYGJ-001 车辆超速行驶', time: '11: 00' },
  { message: 'RYGJ-001 车辆违章停车', time: '11: 00' },
  { message: 'RYGJ-001 车辆不按规定道路行驶', time: '11: 00' },
  { message: 'RYGJ-001 车辆不按规定时段通行', time: '11: 00' },
  { message: 'RYGJ-001 车辆不按规定时段通行', time: '11: 00' },
  { message: 'RYGJ-001 车辆不按规定时段通行', time: '11: 00' }
])
</script>

<style scoped>
/* Add any additional styles here */
</style>
